<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery</title>
</head>
<body>
    <div id="dom1"></div>
    <div id="dom2"></div>
    <!-- jQuery是一个快速、简洁的JavaScript框架。
        jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。
        它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，
        优化HTML文档操作、事件处理、动画设计和Ajax交互。 -->
    <!-- 可以将jquery库下载到本地，然后引入本地的jquery库 -->
    <!-- <script src="../js/jquery.js"></script> -->
    <!-- 可以直接引入外网资源 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
        //操作dom元素，给它添加点内容，加背景色，加颜色，加边框，加点击事件
        //过去是这样操作：
        let dom1 = document.getElementById('dom1')
        dom1.innerHTML = 'HelloWorld'
        dom1.style.backgroundColor = 'lightblue'
        dom1.style.color = 'red'
        dom1.style.border = '1px solid black'
        dom1.onclick = function(){
            this.innerHTML = '你好世界'
        }
        //现在我们有了jquery
        //$('#dom2') 用于获取dom2元素，并转为jquery对象
        //html()方法 用于设置dom元素的内容，等价于 innerHTML
        //css()方法 用于设置dom元素的样式，该方法有两种用法：
        //1.css('样式属性','属性值') 只能设置一个样式属性
        //2.css({样式属性:'属性值'}) 可以同时设置多个样式属性
        //click()方法 用于给dom元素添加点击事件，等价于 onclick
        $('#dom2').html('HelloWorld')
        // .css('backgroundColor','lightblue').css('color','red').css('border','1px solid black')
        .css({backgroundColor:'lightblue',color:'red',border:'1px solid black'})
        .click(function(){
            $(this).html('你好世界')
        })

        //jquery对象的方法，可以反复点出新的方法，继续操作dom对象，它的设计原理是这样的：
        let obj={
            a(){
                console.log('我是a');
                //在方法的末尾，返回了调用该方法的对象
                return this
            },
            b(){
                console.log('我是b');
                return this
            },
            c(){
                console.log('我是c');
                return this
            }
        }
        obj.a()
        obj.b()
        obj.c()
        console.log('-'.repeat(30));
        obj.a().b().c().a()
    </script>
</body>
</html>